Skip to content

The useEffect hook

Video Summary

  • In the first two modules of the course, we've spoken about the "core React loop": We give React a chunk of JSX, and it produces the resulting DOM. When the JSX changes (eg. because the state or props change), React will update the DOM to match, always keeping it in sync. This is React's main job, its primary purpose.
  • But what about for things that fall outside of this main job? For example, what if we want to update the document's title, to include a state variable?
  • This is known as a side effect. Other examples of side effects include interacting with Local Storage, or making network requests.
  • React gives us a specific tool for managing side effects: the useEffect hook. We pass some code to useEffect, via a callback function, and React calls that function for us right after each render.
  • Why not do the work directly in the component? Well, we can, but useEffect gives us additional tools.
  • We can specify dependencies so that the effect only runs sometimes, when a particular value has changed. For example:
React.useEffect(() => {
  // Effect logic
  document.title = `(${count}) — Counter 2.0`;
}, [count]);
  • By specifying [count], we're saying that the effect logic should only run when the count variable changes.
  • Effects always run after the very first render, no matter what we specify in our dependency array.

Playing with this example

The tricky thing about this example, and the reason I did it in my local code editor, is that the document's title isn't visible when using the interactive sandboxes in this course playground. 😅

I've included the sandbox below anyway, and added a console.log to show the new value. You're also welcome to run the code locally on your machine, if you really want to dig into this example.

Code Playground

import React from 'react';
import {
ChevronUp,
ChevronsUp,
ChevronDown,
ChevronsDown,
RotateCcw,
Hash,
} from 'react-feather';

function Counter({ name, initialVal = 0 }) {
const [count, setCount] = React.useState(initialVal);
React.useEffect(() => {
document.title = `(${count}) — Counter 2.0`;
console.log('Document title is:', document.title);
}, [count]);
return (
<>
<h2>Hi {name}!</h2>
<div className="wrapper">
<p>
<span>Current value:</span>
<span className="count">{count}</span>
</p>
<div className="button-row">
<button onClick={() => setCount(count + 1)}>
<ChevronUp />
preview
console
  1. Document title is:(0) — Counter 2.0

Strict mode gotcha

Before we get too deep into useEffect, I want to mention a really common stumbling block.

As you use React outside this course platform, you might notice something a bit curious: effects seem to run twice right when the component first mounts.

This is due to a setting known as Strict Mode. In Strict Mode, React will automatically re-run certain chunks of code, while we're working on our applications. This is done to highlight potential issues.

For now, Strict Mode is disabled on this course platform. In a few lessons, we'll learn all about Strict Mode, and from that moment onwards, it'll be enabled in all sandboxes in this course.